<template>
  <div id="newNutritionPrescription">
    <van-nav-bar title="历史营养处方" left-arrow left-text="返回" @click-left="onClickLeft" fixed placeholder>
      <template #right>
        <span @click="onClickLeft">历史营养处方</span>
       
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="prescription">
        <h1>营养处方</h1>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="20">
            <van-field 
            name="nengliang"
            :value="form.nengliang" 
            label="建议摄入能量" 
            placeholder="暂无信息" 
            readonly />
             
          </van-col>
          <van-col span="3" class="company">千卡</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21">
            <van-field 
            name="danbaizhi"
            v-model="form.danbaizhi" 
            label="建议摄入蛋白质" 
            placeholder="暂无信息" 
            type="number" 
            readonly />
          </van-col>
          <van-col span="3" class="company">g</van-col>
        </van-row>
      </div>
      <!-- 早中晚 膳食 -->
      <div class="dietprescription" v-if="form.zc_taocan_id != 0 || form.wc_taocan_id != 0 || form.d_taocan_id != 0">
        <h1>膳食处方</h1>
        <div class="breakfast" v-if="form.zc_taocan_id != 0">
          <div class="break">
            <img src="@/assets/images/Dietzc_img.png" alt />
            <van-field
              readonly
              clickable
              name="zc_time"
              :value="form.zc_time"
              label="早餐"
              placeholder="暂无数据"
            />
          
          </div>
          <van-field name="zc_ty" label="食品方式" input-align="right">
            <template #input >
              <div class="foodType">
                <p v-for="(item,item1) in foodType" :key="item1">
                  <span v-if="form.zc_ty==item.id">{{item.title}}</span>
                </p>
              </div>
            </template>
          </van-field>
          <van-field
            readonly
            clickable
            name="picker"
            v-model="form.zc_taocan_title"
            label="食品套餐"
            placeholder="暂无数据"
            
          />
          <div class="foodMain" v-if="form.zc_taocan_id">
            <div class="food">
              <van-row type="flex" align="center">
                <van-col span="4">
                  <div class="num">{{ form.zc_taocan_id }}</div>
                </van-col>
                <van-col span="18" :offset="6">
                  <div class="content">
                    <div v-for="val in form.zc_taocan_info" :key="val">{{ val }}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div class="lunch" v-if="form.wc_taocan_id != 0">
          <div class="break">
            <img src="@/assets/images/Dietwuc_img.png" alt />
            <van-field
              readonly
              clickable
              name="wc_time"
              :value="form.wc_time"
              label="午餐"
              placeholder="请选择"
            />
            <van-popup position="bottom">
              <van-datetime-picker
                type="time"
              />
            </van-popup>
          </div>
          <van-field name="wc_ty" label="食品方式" input-align="right">
            <template #input>
              <div class="foodType">
                <p v-for="(item,item2) in foodType" :key="item2">
                  <span v-if="form.wc_ty==item.id">{{item.title}}</span>
                </p>
              </div>
            </template>
          </van-field>
          <van-field
            readonly
            clickable
            name="picker"
            v-model="form.wc_taocan_title"
            label="食品套餐"
            placeholder="请选择食品套餐"
          />
          <div class="foodMain" v-if="form.zc_taocan_id">
            <div class="food">
              <van-row type="flex" align="center">
                <van-col span="4">
                  <div class="num">{{ form.wc_taocan_id }}</div>
                </van-col>
                <van-col span="18" :offset="6">
                  <div class="content">
                    <div v-for="list in form.wc_taocan_info" :key="list">{{ list }}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div class="dinner" v-if="form.d_taocan_id != 0">
          <div class="break">
            <img src="@/assets/images/Dietwc_img.png" alt />
            <van-field
              readonly
              clickable
              
              name="d_time"
              :value="form.d_time"
              label="晚餐"
              placeholder="请选择"
            />
          </div>

          <van-field name="dinnerRadio1" label="食品方式" input-align="right">
            <template #input>
             <div class="foodType">
                <p  v-for="(item,item3) in foodType" :key="item3">
                  <span v-if="form.d_ty==item.id">{{item.title}}</span>
                </p>
             </div>
            </template>
          </van-field>
          <van-field
            readonly
            clickable
            name="picker"
            v-model="form.d_taocan_title"
            label="食品套餐"
            placeholder="请选择食品套餐"
          />
          <div class="foodMain" v-if="form.d_taocan_id">
            <div class="food">
              <van-row type="flex" align="center">
                <van-col span="4">
                  <div class="num">{{ form.d_taocan_id }}</div>
                </van-col>
                <van-col span="18" :offset="6">
                  <div class="content">
                    <div v-for="list in form.d_taocan_info" :key="list">{{ list }}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 口服营养方案 -->
   
      <div class="oral" v-if="form.kffangan !== undefined && form.kffangan!== null && form.kffangan.length>0">
        <h1 >口服营养方案</h1>
        <div class="oralBox" v-for="(item,index) in form.kffangan" :key="index">
          <van-field
            readonly
            clickable
            name="administration"
            :value="item.time"
            label="口服时间"
            placeholder="请选择口服时间"
          />

          <van-field
            readonly
            clickable
            type="textarea"
            name="picker"
            :value="item.title + item.info"
            label="辅助食品"
            :placeholder='item.title == "" ? "请选择辅助食品" :  item.info'
          />
          
        </div>
      </div>
      <!-- 建议加餐 -->
      <div class="extrameals" v-if="form.jiacan !== undefined && form.jiacan!== null && form.jiacan.length>0">
        <h1>加餐建议</h1>
        <div class="extramealsBox" v-for="(item,index) in  form.jiacan" :key="index">
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value=" item.time "
            label="加餐时间"
            placeholder="请选择加餐时间"
          />
          <van-field
            readonly
            clickable
            type="textarea"
            name="picker"
            :value="item.title + item.info"
            label="加餐食品"
            placeholder="请选择加餐食品"
          />
        </div>
      </div>
      <!-- f口服药物 -->
       <!-- <div class="oral" v-if=" form.kfyaowu && form.kfyaowu.length != 0">
         <h1>口服药物</h1>
        <div class="oralBox" v-for="(item,index) in form.kfyaowu" :key="index">
          <van-field
            readonly
            clickable
            name="administration"
            :value="item.time"
            label="口服时间"
            placeholder="请选择口服时间"
          />

          <van-field
            readonly
            clickable
            type="textarea"
            name="picker"
            :value="item.title + item.info"
            label="服用药物"
            :placeholder='item.title == "" ? "请选择服用药物" :  item.info'
          /> 
          
        </div>
      </div> -->
      <!-- 运动处方 -->
      <div class="exercise" v-if="form.yundong !== undefined && form.yundong!== null && form.yundong.length>0">
        <h1>运动处方</h1>
        <div class="exerciseBox" v-for="(item,index) in  form.yundong" :key="index">
          <van-field
            readonly
            clickable
            name="datetimePicker($event,index)"
            :value="item.time"
            label="运动时间"
            
            placeholder="请选择运动时间"
          />
          
          <van-field
            readonly
            clickable
            name="picker"
            :value="item.title"
            label="运动方式"
            placeholder="请选择运动方式"
          />
          

          <van-row  type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                readonly
                v-model="item.shichang"
                label="运动时间"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="3" class="company">分钟</van-col>
          </van-row>
        </div>
      </div>
     
      <div class="principle" v-if="form.zlyz_info != '' || form.zlyz_video != ''">
        <div class="title">
          <h1>解决方案</h1>
            
        </div>
        <div  class="yd_textarea" >
          <van-field
          v-model="form.zlyz_info"
          rows="4"
          autosize
          label=""
          type="textarea"
          placeholder="暂无信息"
          readonly
          />
        </div>
        <div class="video">
          <video-player v-if="form.zlyz_video "  class="video-player vjs-custom-skin"
              ref="videoPlayer" 
              :playsinline="true" 
              :options="playerOptions"
              @play="onPlayerPlay"
            ></video-player>
        </div>
      </div>
      <div>
       
      </div>
    </div>

  </div>
</template>

<script>
import { chufanginfo } from "@/apis/treatmentplan";
import { chufangoption } from "@/apis/record";
export default {
  data() {
    return {
      id:'',
      hzid:null,
      radio:'1',
      radio:'2',
      radio:'3',
      foodType:[],
      form: {
        
      },
      playerOptions : {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "" //url地址
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true  //全屏按钮
        },

      }
    };
  },
  methods: {
    records() {
      chufanginfo({ id: this.id })
        .then((res) => {
          this.form = res.data.list
          console.log(this.form)
          this.playerOptions['sources'][0]['src'] = res.data.list.zlyz_video
          console.log( res.data.list.zlyz_video)
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    food() {
       chufangoption({hzid:this.hzid, ty: 0, pid:0 })
        .then((res) => {
          console.log(res.data);
          this.foodType = res.data.list;
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    onPlayerPlay() {
      let playbut = document.getElementsByClassName("vjs-big-play-button")
      playbut[0].style.display = "none"
    }
  },

  mounted(){
    this.records(),
    this.food()
  },
  created() {
    this.id = this.$route.params.id;
    this.hzid = this.$route.params.hzid;
    
  },
};
</script>

<style lang="less">
#newNutritionPrescription {
   input{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  text-align: left;
  .van-nav-bar__left {
    .van-icon,.van-nav-bar__text {
      color: #404040;
    }
  }
  .foodMain {
    margin: 10px 10px;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .food {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin: 10px 0;
    background-color: #fff;
    .van-row {
      position: relative;
      border-bottom: none !important;
    }
    .van-col {
      &:first-child {
        position: absolute;
        background-color: #4589ed;
        height: 100%;
        font-size: 30px;
        color: #fff;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        width: 25%;
      }
      .num {
        width: 100%;
        height: 42px;
        text-align: center;
        font-size: 30px;
        line-height: 40px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -20px;
      }
      .content {
        padding: 9px 0 9px 9px;
        div {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .van-divider {
    border-color: transparent;
    margin: 10px 0;
  }
  .van-nav-bar__right {
    color: #3660c8;
    font-size: 14px;
  }
  h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .main {
    .company {
      font-size: 15px;
    }
    margin: 15px;
    .van-row {
      border-bottom: 1px solid #f5f5f5;
    }

    .prescription,
    .dietprescription,
    .oral,
    .extrameals,
    .exercise,
    .principle {
      padding: 20px 15px 0;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      .breakfast,
      .lunch,
      .dinner {
        padding-top: 20px;
        .foodType{
          width: 100%;
          display: flex;
          align-items: flex-start;
        }
        img {
          height: 17px;
        }
      }
      .btn {
        display: flex;
        flex-direction: row-reverse;
        .del {
          img {
            width: 39px;
            margin: 22px 34px 24px 0;
          }
        }
        .add {
          text-align: right;
          img {
            width: 39px;
            margin: 22px 0 24px;
          }
        }
      }
      .van-cell {
        padding: 20px 0;
        &::after {
          right: 0;
          left: 0;
        }
        .van-field__label {
          font-size: 15px;
          margin-left: 5px;
          width: 120px;
        }
      }
      .extramealsBox,
      .oralBox,
      .exerciseBox,
      .principleBox{
        margin-top: 15px;
      }
  
    }
    .principle{
      padding-bottom: 10px;
      .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .titBtn{
          display: flex;
          align-items: center;
          .titBtnLeft,
          .titBtnRight{
            display: flex;
            align-items: center;
            margin: 0 5px;
          }
          img{
            width: 15px;
          }
          p{
            margin:0 5px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-size: 12px;
            color:#404040;
          }
        }
      }
      
      .video-js {
        width: 100%;
        height: 150px;
        margin: 10px 0 0 0 ;
        .video-player{
          border-radius: 5px;
        }
        .vjs-big-play-button {
          font-size: 3em;
          line-height: 44px;
          height: 44px;
          width: 44px;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -22px;
          margin-left: -22px;
          padding: 0;
          cursor: pointer;
          opacity: 1;
          border: 0.06666em solid #fff;
          background-color: #2B333F;
          background-color: rgba(43, 51, 63, 0.7);
          border-radius: 50%;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
        }
      }
    }
    .dietprescription {
      padding-bottom: 15px;
    }
    .van-button {
      width: 100%;
      margin-top: 20px;
      border-radius: 3px;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }
    .yd_textarea{
      margin-top:10px ;
      padding: 10px;
      border-radius: 4px;
      background: #F5F5F5;
      color: #999;
      .van-cell{
         padding: 0;
      }
      div{
         background: #F5F5F5;
      }
      textarea{
        background: #F5F5F5;
      }
    }
  }
  .main .dietprescription .van-cell .van-field__label {
    font-size: 15px;
    margin-left: 5px;
    width: 60px !important;
  }
  .break {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebedf0;
  }
  .van-field__error-message {
    display: none;
  }
}

</style>
